<template>
      <div class="mytext">
        <div class="left_my">
            <ul style="width: 40%;height: 100%;">
                <h4 style="color: #000;">行业解决方案</h4>
                <li v-for="(item,index) in datas.arrs" :key="index">{{ item }}</li>
            </ul>
            <ul style="width: 40%;height: 100%;">
                <h4 style="color: #000;">场景解决方案</h4>
                <li v-for="(item,index) in datas.secharr" :key="index">{{ item }}</li>
            </ul>
        </div>
        <div class="right_my">
             <dl>
                <dt>
                    <img :src="imges" alt="">
                </dt>
                <dd>
                    <h4>企业采购1对1专属顾问</h4>
                </dd>
             </dl>
             <div style="width: 60%;height: 30%;border: 2px solid #000;">
            <img style="width: 100%; height: 100%;" src="https://ts1.cn.mm.bing.net/th/id/R-C.3cb50479d0bfc27fdc2451bb36569bc3?rik=XE1OT3zlEShV7w&riu=http%3a%2f%2fpic.baike.soso.com%2fp%2f20130314%2f20130314001443-660044820.jpg&ehk=vlBaqJAqwvWCjG%2fd2aQGgYcWduswwgsDiExEDYzNMRM%3d&risl=&pid=ImgRaw&r=0" alt="">
        </div>
        <p>立即扫码，真人资讯</p>
        </div>
      </div>
</template>

<script setup lang="ts">
import MyText from '../My/MyText.vue';

const {datas} = defineProps({
    datas:{
        type:Object,
        default:{} as {}
    },
    imges:{
        type:String,
        default:'https://img-repo-intl.imdr.cn/dr/plan-241144/Z5FacnkXrUHZeeYsm0.jpg!w640.jpg'
    }
});

</script>

<style scoped lang="scss">
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
   .mytext{
    width: 580px;
    height: 350px;
    background: linear-gradient(to bottom, #f3f8ff, #f8fbff);
    border-radius: 10px;
    box-shadow: 0 0 3px 1px #ccc;
    position: absolute;
    top: 50px;
    left: -15px;
    display: flex;
     .left_my{
        width: 70%;
        height: 100%;
        background-color: #fff;
        border-radius: 10px 0 0 10px;
        box-sizing: border-box;
        padding: 10px 20px;
        display: flex;
        justify-content: space-around;
        ul{
            text-align: center;
            li{
                line-height: 30px;
                color: #000;
            }
            li:hover{
                color: dodgerblue;
            }
        }
     }
     .right_my{
      width: 30%;
      height: 100%;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    //   line-height: 15%;
      position: relative;
      dl{
        width: 85%;
        height: 40%;
        margin-top: 20%;
        dt{
            width: 50%;
            height: 50%;
            margin:0 auto;
            box-sizing: border-box;
            padding: 5px;
            border: 1px solid dodgerblue;
            border-radius: 100%;
            img{
                width: 100%;
                height: 100%;
                border-radius: 100%;
            }
        }
        dd{
            line-height: 0;
            color: #000;
            margin-top: 15px;
        }
      }
      div{
        position: absolute;
        top: 150px;
       border-radius: 10px;
       padding: 5px;
      }
      p{
        margin-top: 25%;
        font-size: 12px;
        color: #ccc;
      }
     }
   }
</style>